<template>
  <div class="box_e" style="position: relative">
    <!-- <div class="carousel-today" style="color: hsl(197, 98%, 65%)">{{ today }}</div> -->
    <div class="carousel-wrapper" v-if="noticeListData.length">
      <vue-seamless-scroll :data="noticeListData" :class-option="optionSetting" style="height: 100%; overflow: hidden">
        <ul class="item" style="list-style: none; padding: 0px; margin: 0px">
          <li
            v-for="(item, index) in noticeListData"
            :key="index"
            :data-index="index"
            style="padding: 0px; margin: 0px; font-size: small; list-style: none; text-align: left; line-height: 26px"
          >
            <div
              v-if="index % 2 == 0"
              style="
                height: 100%;
                width: 100%;
                padding: 6px;
                border-bottom: 1px solid rgb(170, 221, 255, 0.3);
                box-shadow: 0;
                font-size: 18px;
              "
            >
              <span
                style="color: rgb(170, 221, 255); padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListName[index] }}
              </span>
              <span
                style="color: rgb(170, 221, 255); padding: 0 10px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ item }}
              </span>
              <span
                style="color: #fff; padding: 2px 4px; float: right"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListNum[index] }}
              </span>
            </div>
            <div
              v-else
              style="
                height: 100%;
                width: 100%;
                padding: 6.5px;
                border-bottom: 1px solid rgb(170, 221, 255, 0.3);
                box-shadow: 0;
                font-size: 18px;
              "
            >
              <span
                style="color: rgb(170, 221, 255); padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListName[index] }}
              </span>
              <span
                style="color: rgb(170, 221, 255); padding: 0 10px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ item }}
              </span>
              <span
                style="color: #fff; padding: 2px 4px; float: right"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListNum[index] }}
              </span>
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div v-else class="flex flex-center" style="height: 100%; color: #ccc">
      <span>暂无数据</span>
    </div>
  </div>
</template>
<script>
import VueSeamlessScroll from '@/utils/vueSeamlessScroll/vue-seamless-scroll.min.js'
import dayjs from 'dayjs'
export default {
  components: {
    VueSeamlessScroll
  },
  name: 'box-right-e',
  data() {
    return {
      // 消息提示滚动配置
      optionSetting: {
        step: 0.2,
        limitMoveNum: 7,
        openTouch: false,
        waitTime: 1,
        singleHeight: 10
      },
      today: dayjs().format('YYYY-MM-DD'),
      titlename: 'IQC检验',
      noticeListName: [
        '东方小飞',
        '东方小飞',
        '东方小飞',
        '品拓品',
        '品拓品',
        '新大陆',
        '新大陆',
        '新大陆',
        '新大陆',
        '韦尔通',
        '信和达',
        '联心达',
        '联心达',
        '联心达',
        '联心达',
        '联心达',
        '联心达',
        '联心达',
        '广盛弘',
        '广盛弘',
        '风华高科',
        '风华高科',
        '风华高科'
      ],
      noticeListData: [
        'WFN-111012739 塑料结构件+无丝印',
        'WFN-111013673 SP830+上壳+黑色',
        'WFN-111013688 SP830+扣手+黑色',
        'WFN-108010138 通用接口插座',
        'WFN-108030007 线对板插座',
        'WFN-106030015 MOS管 华虹+P沟道',
        'WFN-107010012 电源类芯片',
        'WFN-107020078 CPU BROADCOM ',
        'WFN-107020027 CPU TMC+CORTEX-M3',
        'WVER-1130040026 热熔胶2209(容量30ML)',
        'WVER-1030010119 功率电感',
        'WLXD-88.1013.01 电源IC Buck',
        'WLXD-88.1013.08 电源IC Power Switch',
        'WLXD-88.1015.01 集成芯片 Sensor',
        'WLXD-88.1300.08 二极管Dual Schottky',
        'WLXD-88.1402.01 场效应管,NCE4614',
        'WLXD-88.1500.00 电阻 SMD Resistor,0603',
        'WLXD-88.1500.08 电阻 SMD Resistor0402',
        'WFN-111013845 ME31S+触摸笔',
        'WFN-111014424 ME31S上壳',
        'WFN-111015604 N910+电池盖',
        'WFN-104010004碳膜电阻 100K+±5%',
        'WFN-104010005碳膜电阻 100K+±1%',
        'WFN-104010006碳膜电阻 10K+1\\16W+±5%'
      ],
      noticeListNum: [
        ' PCS 629',
        ' PCS 2112',
        ' PCS 3600',
        ' PCS 24000',
        ' PCS 54000',
        ' PCS 30000',
        ' PCS 30000',
        ' PCS 1260',
        ' PCS 4980',
        ' PCS 15000',
        ' PCS 12500',
        ' PCS 2000',
        ' PCS 9000',
        ' PCS 20000',
        ' PCS 3000',
        ' PCS 4000',
        ' PCS 20000',
        ' PCS 10000',
        ' PCS 10000',
        ' PCS 6860',
        ' PCS 4100',
        ' PCS 700000',
        ' PCS 70000',
        ' PCS 500000'
      ]
    }
  },
  methods: {},
  watch: {}
}
</script>

<style scoped>
@charset "UTF-8";
.box_e {
  height: 300px;
  overflow: hidden;
}

.carousel-today {
  position: absolute;
  top: -15px;
  right: 16px;
  color: #a2e8ff;
}

.carousel-wrapper {
  padding: 8px;
}
.carousel-wrapper li {
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.carousel-wrapper .title {
  font-size: 14px;
  font-family: '微软雅黑';
  color: #303133;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.carousel-wrapper .title:hover {
  color: #1890ff;
}
.carousel-wrapper .more {
  font-size: 12px;
  color: #4a92d4ec;
  flex: 0 0 52px;
  text-align: right;
  margin-right: -8px;
  cursor: pointer;
}
.carousel-wrapper .more:hover {
  color: #1890ff;
  font-weight: 600;
}
</style>
